<template>
    <view class="tabs">
        <view
            v-for="(tab, index) in tabs"
            class="tab-item"
            :class="{ active: tabIndex == index, 'scroll-tab': scroll }"
            @click="clickTab(tab, index)"
            :key="index">
            <text class="tab-item-text">{{ tab.title }}</text>
        </view>
    </view>
</template>

<script>
export default {
    props: ["tabIndex", "tabs", "scroll"],
    data() {
        return {}
    },
    methods: {
        clickTab(item, index) {
            this.$emit("clickTab", index)
        },
    },
}
</script>

<style lang="scss">
.tabs {
    display: flex;
    padding: 10rpx $app-page-padding;
    background: $color-white;

    .tab-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        color: grey;
        font-size: $app-tab-text-size;
        font-weight: 500;
        height: 100%;
        box-sizing: border-box;

        .tab-item-text {
            display: flex;
            height: 60rpx;
            align-items: center;
            justify-content: center;
            padding: 0 16rpx;
        }

        &.active {
            .tab-item-text {
                color: $app-color-main;
                border-bottom: 4rpx solid $app-color-main;
            }
        }
    }
}
.scroll-tab {
    white-space: nowrap;
}
</style>
